<template>
    <div>
        <h4>主要是购物车分组显示</h4>
        <div v-for="(item, index) in tableData" :key="index">
            <el-table ref="multipleTable" :data="item.items" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column :label="item.shoppingName" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="goodsName" width="120">
                </el-table-column>
                <el-table-column prop="goodsPrice" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="goodsNumber" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="小计" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.goodsNumber * scope.row.goodsPrice }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    shoppingId: '1', shoppingName: '梁sir店铺', items: [
                        { goodsId: '1', goodsName: '商品1', goodsPrice: 36.00, goodsNumber: 1 },
                        { goodsId: '2', goodsName: '商品2', goodsPrice: 106.00, goodsNumber: 1 },
                        { goodsId: '3', goodsName: '商品3', goodsPrice: 86.00, goodsNumber: 1 },
                    ]
                },
                {
                    shoppingId: '2', shoppingName: '小林铺子', items: [
                        { goodsId: '4', goodsName: '商品4', goodsPrice: 452.00, goodsNumber: 1 },
                        { goodsId: '5', goodsName: '商品5', goodsPrice: 16.00, goodsNumber: 1 },
                    ]
                },
            ]
        };
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
};
</script>